<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 200px;
            line-height: 40px;
            margin: 100px auto;
            text-align: center;
            background: skyblue;
        }

        p {
            height: 50px;
            background: peru;
        }
    </style>
</head>

<body>
    <div id="app">
        <button v-on:click="count++">点击一下，计数</button>
        <!-- innerHTML -->
        <aside>你已经点了<span v-html="count"></span>次</aside>

        <!-- 以下二者都相当于 innerText -->
        <aside>你已经点了<span>{{count}}</span>次</aside>
        <aside>你已经点了<span v-text="count"></span>次</aside>

        <button v-on:click="f1($event,77)" v-on:mouseenter="f1($event,99)">点击一下，弹出消息123</button>
        <button @="{click:f2, mouseenter:f2}">点击一下，弹出消息456</button>
        <button @click="f3">点击，下方盒子切换显示隐藏</button>
        <p v-show="show">我是被显示 隐藏的盒子</p>
    </div>

    <script src="./js/dev/vue.js"></script>

    <script>
        const app = new Vue({
            // 绑定html盒子
            el: '#app',
            // 盒子内能使用的数据
            data: {
                count: 0,
                show: true
            },
            // 盒子内能调用的方法
            methods: {
                // 两种方法定义方式
                f1(event, a) {
                    console.log(event)
                    console.log(a)
                    alert(123)
                },
                f2: function (event) {
                    console.log(event)
                    alert(456)
                },
                f3(event) {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>

</html>